<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Ventana Modal, Popup con animación css3 | antocas.com</title>
	<meta name="description" content="Tutorial : crear una ventana Modal, popup o ventana emergente con CSS3">
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<link href="http://antocas.com/blog/wp-content/themes/fantasia/images/favicon.ico" rel="icon" type="image/x-icon" />
	<link rel="stylesheet" href="demo.css">
	<script>
		$(document).ready(function() {
			$('.button').click(function() {
				type = $(this).attr('data-type');
				$('.overlay-container').fadeIn(function() {
				window.setTimeout(function(){
					$('.window-container.'+type).addClass('window-container-visible');
				}, 100);
				});
			});
			$('.close').click(function() {
				$('.overlay-container').fadeOut().end().find('.window-container').removeClass('window-container-visible');
			});
		});
	</script>
</head>
<body>
	
	<h2>Creando una Ventana Modal (popup) con CSS3 (scale Transform).</h2>
	<input type="button" value="Acercar Ventana Modal" class="button" data-type="zoomin" />
	<input type="button" value="Alejar Ventana Modal" class="button" data-type="zoomout" />
	
	<div class="overlay-container">
		<div class="window-container zoomin">
			<h3>Hola soy tu ventana modal "Efecto Acercar"</h3> 
			Gracias al css3 y su propiedad de<strong> scale </strong>estoy aqui y soy mas sencillo de realizar<br/>
			Regresa al tutorial y sigue las instrucciones, nos vemos!<br/>
			<span class="close">Cierrame</span>
		</div>
		<div class="window-container zoomout">
			<h3>Hola soy tu ventana modal "Efecto Alejar"</h3> 
			Gracias al css3 y su propiedad de<strong> scale </strong>estoy aqui y soy mas sencillo de realizar<br/>
			Regresa al tutorial y sigue las instrucciones, nos vemos!<br/>
			<span class="close">Cierrame</span>
		</div>
	</div>
	
	<a href="http://www.antocas.com/blog/ventana-modal-popup-con-css3-animacion">&laquo; Regresar al Tutorial</a>
</body>
</html>